<template>
  <div class="page-index">
    <Header :shadow="scrollTop > 0" :max-percent="maxPercent" />
    <!-- <Section0 :max-percent="maxPercent" :quotient="quotient" />-->
    <Section1 :max-percent="maxPercent" :quotient="quotient" />
    <Section2 />
    <Section3 />
    <Section4 />
    <Section5 />
    <Section6 />
    <Section7 />
    <Footer />
  </div>
</template>
<script>
import Header from './component/header.vue';
import Footer from './component/footer.vue';
import Section0 from './component/section-0.vue';
import Section1 from './component/section-1.vue';
import Section2 from './component/section-2.vue';
import Section3 from './component/section-3.vue';
import Section4 from './component/section-4.vue';
import Section5 from './component/section-5.vue';
import Section6 from './component/section-6.vue';
import Section7 from './component/section-7.vue';

export default {
  name: 'page-index',
  components: {
    Header,
    Footer,
    Section0,
    Section1,
    Section2,
    Section3,
    Section4,
    Section5,
    Section6,
    Section7,
  },
  data() {
    return {
      flag: false,
      scrollTop: 0,
      quotient: 0,
      maxPercent: 0,
    };
  },
  mounted() {
    if (this.$config.isServer) {
      return;
    }
    this.computeQuotient();
    window.document.addEventListener('scroll', this.handleDocumentScroll);
  },
  beforeUnmount() {
    if (this.$config.isServer) {
      return;
    }
    window.document.removeEventListener('scroll', this.handleDocumentScroll);
  },
  methods: {
    computeQuotient() {
      this.flag = true;
      const screenHeight = window.screen.availHeight || window.screen.height;
      const scrollTop = document.scrollingElement.scrollTop;
      const quotient = scrollTop / screenHeight;
      const maxPercent = Math.min(1, quotient);

      this.scrollTop = scrollTop;
      this.quotient = quotient;
      this.maxPercent = maxPercent;

      this.$nextTick(() => {
        this.flag = false;
      });
    },
    handleDocumentScroll() {
      if (this.flag) {
        return;
      }
      window.requestAnimationFrame(this.computeQuotient);
    },
  },
};
</script>
<style lang="less" scoped>
.page-index {
  background-color: #000;
}
</style>
